<template>
  <nav-bar :isFixed="isFixed">
    <template v-slot:left>
      <div class="back" @click="back">
        <img
          class="back-img"
          src="~@/assets/images/icon/back/fanhui_1.png"
          alt=""
        />
      </div>
    </template>
    <template v-slot:center> 注册账号 </template>
  </nav-bar>
  <login type="register" :confirmRegister="register" />
  <n-dialog
    :isShow="dialog.showDialog"
    :title="dialog.title"
    :content="dialog.content"
    @close="handleDialog({ showDialog: false })"
  >
    <!-- <slot v-slot:'right'></slot> -->
    <template v-slot:right>
      <div style="flex: 1">测试</div>
    </template>
  </n-dialog>
</template>

<script lang="ts">
import { defineComponent, inject, ref } from "vue";
import { useRouter } from "vue-router";
import Login from "@/components/login/Login.vue";
import NavBar from "@/components/navbar/NavBar.vue";
import useRegister from "./useRegister";
import useDialog from "@/hooks/useDialog";

export default defineComponent({
  components: {
    Login,
    NavBar,
  },
  setup() {
    const router = useRouter();

    let isFixed = ref(true);

    // 返回上一页面
    const back = () => {
      router.go(-1);
    };

    // 获取 tip 提示弹窗
    const tip: any = inject("tip");

    // 控制弹窗hooks
    const { dialog, handleDialog } = useDialog();

    // register 注册时回调函数
    const register = useRegister({ tip, back, handleDialog, dialog });

    return {
      register,
      back,
      dialog,
      handleDialog,
      isFixed,
    };
  },
});
</script>

<style lang="less" scoped>
.back {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .back-img {
    width: 50%;
    max-width: 20px;
    max-height: 20px;
  }
}
</style>

